<template>
  <!-- 催收执行页-历史信息模块-申请历史 -->
  <section class="component apply-history">
    <!-- 搜索区域 -->
    <data-form :model="model" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="审批类型" prop="applyCategory">
          <el-select
            clearable
            placeholder="请选择"
            v-model="model.applyCategory"
          >
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData(
                'ApplyCategory'
              )"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批状态" prop="applyStatus">
          <el-select clearable placeholder="请选择" v-model="model.applyStatus">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('ApplyStatus')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人" prop="applyRealName">
          <el-input
            clearable
            placeholder="请输入申请人"
            v-model.trim="model.applyRealName"
          ></el-input>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box
      :data="dataSet"
      :height="200"
      :page="pageService"
      @onPageChange="refreshData"
    >
      <template slot="columns">
        <el-table-column
          :formatter="
            row => $filter.dictConvert(row.applyCategory, 'ApplyCategory')
          "
          :min-width="$helper.getColumnWidth(4)"
          label="审批类型"
          prop="applyCategory"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="申请人"
          prop="applyRealName"
        ></el-table-column>
        <el-table-column
          :formatter="row => $filter.dateTimeFormat(row.applyTime)"
          :min-width="$helper.getColumnWidth(5)"
          label="申请时间"
          prop="applyTime"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="申请原因"
          prop="applyDescription"
        ></el-table-column>
        <el-table-column
          :formatter="
            row => $filter.dictConvert(row.applyStatus, 'ApplyStatus')
          "
          :min-width="$helper.getColumnWidth(4)"
          label="审核状态"
          prop="applyStatus"
        ></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="onClickDetail(scope.row)"
              >查看审批记录</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>

    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="审批记录"
      :visible.sync="dialog"
      append-to-body
      width="700px"
    >
      <apply-history-detail
        @close="dialog = false"
        :row="row"
        ref="apply-history-detail"
      />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { PageService } from "~/utils/page.service";
import { namespace } from "vuex-class";
import ApplyHistoryDetail from "./apply-history-detail.vue";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    ApplyHistoryDetail
  }
})
export default class ApplyHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;

  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private caseNo: string;

  private model: any = {
    applyCategory: "",
    applyStatus: "",
    applyRealName: "",
    caseNumber: ""
  };
  private dataSet: any[] = [];
  private dialog: boolean = false;
  private row: any = {};

  @Watch("caseNo", { immediate: true })
  private onCaseNumberChange(val) {
    if (!val) return;
    this.refreshData();
  }

  // 刷新数据
  private refreshData() {
    // this.model.caseId = this.caseId;
    this.model.caseNumber = this.caseNo;
    this.caseOperatorPageService
      .caseApplyHistory(this.model, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData();
  }

  private onClickDetail(row) {
    this.row = row;
    this.dialog = true;
    this.$nextTick(() => {
      const form: any = this.$refs["apply-history-detail"];
      form.getDataList();
    });
  }
}
</script>

<style lang="less" scoped></style>
